var circle = document.getElementById('bar');
circle.style.strokeDasharray = circle.getTotalLength();
circle.style.strokeDashoffset = circle.getTotalLength();
document.getElementById('percent').addEventListener('change', function(e) {
    var event = e || window.event;
    var val = parseInt(e.target.value);
    var cont = document.getElementById('cont');

    if(isNaN(val)) {
        val = 100;
    } else {
        var r = circle.getAttribute('r');
        var c = Math.PI * r * 2;

        if(val < 0) {val = 0};
        if(val > 100) {val = 100};

        var pct = (100 - val) / 100 * c;

        circle.style.strokeDashoffset = pct;
        cont.setAttribute('data-pct', val);
    }
}, false);